<template>
  <div class="wrap">
    <header>
      <van-icon  name="arrow-left" @click="$router.push('/layout/home')"/>
    </header>
    <Overlay :showoff="show" @close="close" />
    <div class="top1">
      <img src="../../images/bargain/yun.png" alt="" class="yun" />
      <img src="../../images/bargain/csy.png" alt="" class="csy" />
    </div>
    <div class="top2">
      <p>万元免单卡:全场商品免费带回家</p>
      <div class="list">
        <div class="left">
          <b>小度在家智能屏</b>
          <img src="../../images/bargain/xdxd.jpg" alt="" />
          <span @click="show = true">点击免费拿</span>
        </div>
        <div class="right">
          <b>小度在家智能屏</b>
          <img src="../../images/bargain/xdxd.jpg" alt="" />
          <span>点击免费拿</span>
        </div>
      </div>
    </div>
    <div class="top3">
      <p>万元免单卡:全场商品免费带回家</p>
      <div class="list2">
        <div class="left2">
          <b>小度在家智能屏</b>
          <img src="../../images/bargain/xdxd.jpg" alt="" />
          <span>点击免费拿</span>
        </div>
        <div class="right2">
          <b>小度在家智能屏</b>
          <img src="../../images/bargain/xdxd.jpg" alt="" />
          <span>点击免费拿</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Overlay from "@/components/Overlay.vue";
export default {
  components: {
    Overlay,
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    close(val) {
      this.show = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.van-icon{
    font-size: 25px;
    color: #fff;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 50;
}
.fixed{
    position: fixed;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    left: 1%;
    top: 35%;
    z-index: 999;
}
header{
  width: 100%;
  padding: 0 15px;
  color: #fff;
  display: flex;
  align-items: center;
}
.wrap {
  width: 100%;
  position: relative;
  height: auto;
  background: linear-gradient(to bottom, #ca3439, #e05736);
  .dialog {
    z-index: 99;
  }
  /deep/.van-overlay {
    z-index: 90;
  }
  .top1 {
    width: 100%;
    height: 375px;
    /*  background: skyblue; */
    .yun {
      width: 100%;
      height: 370px;

      position: relative;
    }
    .csy {
      position: absolute;
      top: 80px;
      left: 105px;
      z-index: 1;
      width: 60%;
      height: 280px;
    }
  }
  .top2 {
    p {
      margin-left: 15px;
      display: inline-block;
      font-size: 15px;

      color: #fff;
      width: 90%;
      height: 50px;
      background: #931111;
      border-radius: 25px;
      text-align: center;
      line-height: 49px;
      font-weight: 700;
    }
    .list {
      width: 90%;
      height: 180px;
      background: #a22100;
      margin-left: 15px;
      border-radius: 10px;
      display: flex;
      .left {
        width: 46%;
        height: 85%;
        background: #fddfd5;
        margin-left: 10px;
        margin-top: 15px;
        border-radius: 8px;
        font-size: 13px;
        b {
          margin-top: 5px;
          text-align: center;
          display: inline-block;
          margin-left: 30px;
        }
        img {
          width: 55%;
          height: 90px;
          margin-left:35px;
          margin-top: 5px;
        }
        span {
          display: inline-block;
          width: 70%;
          height: 20px;
          background: #ef6c37;
          color: #fff;
          line-height: 20px;
          text-align: center;
          border-radius: 15px;
          font-size: 11px;
          margin-left: 23px;
          margin-top: 5px;
        }
      }

      .right {
        width: 46%;
        height: 85%;
        background: #fddfd5;
        margin-left: 8px;
        margin-top: 15px;
        border-radius: 8px;
        border-radius: 8px;
        font-size: 13px;
        b {
          margin-top: 5px;
          text-align: center;
          display: inline-block;
          margin-left:30px;
        }
        img {
          width: 55%;
          height: 90px;
          margin-left:35px;
          margin-top: 5px;
        }
        span {
          display: inline-block;
          width: 70%;
          height: 20px;
          background: #ef6c37;
          color: #fff;
          line-height: 20px;
          text-align: center;
          border-radius: 15px;
          font-size: 11px;
          margin-left:23px;
          margin-top: 5px;
        }
      }
    }
  }

  .top3 {
    p {
      margin-left: 15px;
      display: inline-block;
      font-size:15px;

      color: #fff;
      width: 90%;
      height: 50px;
      background: #931111;
      border-radius: 25px;
      text-align: center;
      line-height: 49px;
      font-weight: 700;
    }
    .list2 {
      width: 90%;
      height: 180px;
      background: #a22100;
      margin-left: 15px;
      border-radius: 10px;
      display: flex;
      .left2 {
        width: 46%;
        height: 85%;
        background: #fddfd5;
        margin-left: 10px;
        margin-top: 15px;
        border-radius: 8px;
        font-size: 13px;
        b {
          margin-top: 5px;
          text-align: center;
          display: inline-block;
          margin-left:30px;
        }
        img {
          width: 55%;
          height: 90px;
          margin-left: 35px;
          margin-top:5px;
        }
        span {
          display: inline-block;
          width: 70%;
          height: 20px;
          background: #ef6c37;
          color: #fff;
          line-height: 20px;
          text-align: center;
          border-radius: 15px;
          font-size:11px;
          margin-left:23px;
          margin-top: 5px;
        }
      }

      .right2 {
        width: 46%;
        height: 85%;
        background: #fddfd5;
        margin-left:8px;
        margin-top: 15px;
        border-radius: 8px;
        border-radius: 8px;
        font-size: 13px;
        b {
          margin-top: 5px;
          text-align: center;
          display: inline-block;
          margin-left:30px;
        }
        img {
          width: 55%;
          height:90px;
          margin-left: 35px;
          margin-top: 5px;
        }
        span {
          display: inline-block;
          width: 70%;
          height: 20px;
          background: #ef6c37;
          color: #fff;
          line-height: 20px;
          text-align: center;
          border-radius: 15px;
          font-size: 11px;
          margin-left: 23px;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>